<template>
    <div class="Login">
    	<input type="text" v-model="old_number" class="loginInput" disabled>
		<input type="text" v-model="new_number" class="loginInput" placeholder="请输入要更换的手机号">
		<div class="loginInput YZM">
			<input type="text" v-model="code" placeholder="输入验证码">
			<span v-show="show" @click="getcode">发送验证码</span>
			<span v-show="!show">{{count}}秒后重新获取</span>
			<em>|</em>
		</div>
		<button class="bigBtn" @click="MPN">换绑手机号</button>
    </div>
</template>


<script>
import axios from "axios";
import qs from 'qs'
export default {
  name: 'UserHeader',
  data () {
	return {
		old_number:'',
		new_number:'',
		show: true,
		count:'',
		timer: null,
		code:'',
	}
  },
  methods:{
	//获取手机号
    getNum:function(){
		var that = this
		var openid = localStorage.getItem("openid")
		// var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
		var upload = {
			openid:openid,
		}
		this.$http.post('/index/user/getUsernumber',qs.stringify(upload)).then(res=>{
			console.log(res.data)
			this.old_number = res.data.info
		}).catch(err=>{
			console.log(err)
		})
	},
	//发送验证码
	YZm:function(){
		var that = this
		var openid = localStorage.getItem("openid")
		// var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
		var upload = {
			openid:openid,
		}
		this.$http.post('/index/user/userSendSmsCode',qs.stringify(upload)).then(res=>{
			console.log(res.data)
			//this.old_number = res.data.info
		}).catch(err=>{
			console.log(err)
		})
	},
	//倒计时
	getcode:function(){
		const TIME_COUNT = 60;
		this.YZm()
		if (!this.timer) {
			this.count = TIME_COUNT;
			this.show = false;
			this.timer = setInterval(() => {
				if (this.count > 0 && this.count <= TIME_COUNT) {
					this.count--;
					//
				} else {
					this.show = true;
					clearInterval(this.timer);
					this.timer = null;
				}
			}, 1000)
		}
	},
	//换绑手机号
	MPN:function(){
		// /index/user/ModifyPhoneNumber
		var that = this
		var openid = localStorage.getItem("openid")
		// var openid = 'o1KIj095lVCrkl8pE4S1wXgbcicQ'
		var upload = {
			openid:openid,
			new_number:this.new_number,
			sms_code:this.code
		}
		this.$http.post('/index/user/ModifyPhoneNumber',qs.stringify(upload)).then(res=>{
			console.log(res.data)
			alert(res.data.info)
			if(res.data.status == 200){
				this.$router.go(-1)
			}
			//this.old_number = res.data.info
		}).catch(err=>{
			console.log(err)
		})
	}
  },
  mounted(){
	  this.getNum()
  }
}
</script>

<style scoped>
.loginInput{
  width:87%;
  display: inline-block;
  margin-left:3%;
  padding:3% ;
  border:0;
  border-radius: 5px;
  margin-top:30px;
  background:#FFF;
}
.YZM{
	height:19px;
	margin-top:20px;
	color:#999
}

.YZM span{
	float:right;
    padding: 0 7px;
}
.YZM input{
	    border: 0;
}
.YZM em{
	float:right;
}
input:nth-child(2){
	margin-top:20px
}
.bigBtn{
  width:94%;
  margin-left:3%;
  display: inline-block;
  padding:12px ;
  border:0;
  border-radius: 5px;
  background: #FE2746;
  color:#FFF;
  margin-top:50px;
}
</style>
